<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/css/header.css">
</head>
<body>


<div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
        <li class="nav-item">
            <a class="nav-link " href="/nooob/index.html">首页</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active " href="/nooob/html/css.html">动画模板</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="https://icons.bootcss.com/" target="_blank" rel="noopener">Bootstrap图标库</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://themes.getbootstrap.com/"
               onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">模板/主题</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://www.youzhan.org/"
               onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank"
               rel="noopener">优站精选</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://sdju.xyz/"
                target="_blank"
               rel="noopener">博客</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://www.sasscss.com/" target="_blank" rel="noopener">Sass</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://www.webpackjs.com/" target="_blank" rel="noopener">Webpack</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://www.jekyll.com.cn/" target="_blank" rel="noopener">Jekyll</a>
        </li>
    </ul>
</div>

<ul class="navbar-nav ml-md-auto">


    <li class="nav-item">
        <a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener"
           aria-label="GitHub"></a>
    </li>


</ul>

    <div class="clock_box">
        <div class="clock">
            <p id="time"></p>
        </div>
    </div>

</body>
<script>
    // 获取页面id=time的元素（P元素<p id="time">12:12:12 AM</p>）
    var time = document.querySelector("#time");

    // 定义函数传入time元素
    function up(time_el) {
        // 获取当前时间
        let date = new Date();
        // 获取时分秒
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        // 上午与下午
        let day_night = "AM";

        // 计算上午与下午
        if (h > 12) {
            h = h - 12;
            day_night = "PM";
        }

        // 如果时间小于10则前面补充0
        if (h < 10) { h = "0" + h; }
        if (m < 10) { m = "0" + m; }
        if (s < 10) { s = "0" + s; }

        // 拼接时间并且赋值给time元素的文本中，从而显示
        time_el.textContent = h + ":" + m + ":" + s + " " + day_night;

    }

    // 定时器，每秒执行一次实现更新
    setInterval(() => {
        up(time);
    }, 1000);

</script>
</html>
